<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>有加减号的数字输入框</title>
		<script type="text/javascript" src="../../lib/jquery-3.1.1.js" ></script>
		<style>
			body{
				width: 200px;
				height: 100px;
				margin: 0 auto;
				padding-top: 40px;
			}
			*{
				margin: 0;
				padding: 0;
			}
			.number_controller{
				display: inline-block;
				zoom: 1;
				font-size: 12px;
			}
			.number_controller:after{
			    content: " ";
			    display: block;
			    font-size: 0;
			    height: 0;
			    clear: both;
			    visibility: hidden;
			}
			.number_controller .count_dowm,.number_controller .count_up{
				position: relative;
				float: left;
				height: 30px;
				line-height: 30px;
				width: 30px;
				border: 1px solid #c2c2c2;
			}
			.number_controller .count_dowm:before{
				position: absolute;
				width: 5px;
				height: 1px;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				background-color: #000;
				content: "";
			}
			.number_controller .count_up:before{
				position: absolute;
				width: 7px;
				height: 1px;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				background-color: #000;
				content: "";
			}
			.number_controller .count_up:after{
				position: absolute;
				width: 1px;
				height: 7px;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				background-color: #000;
				content: "";
			}
			.number_controller .count_input{
				float: left;
				width: 60px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				border-width: 1px 0 1px 0;
				border-color: #c2c2c2;
				border-style: solid;
                appearance: none;
                -webkit-appearance: none;
                outline: none;
			}
            .number_controller .count_dowm.disabled,.number_controller .count_up.disabled{
                pointer-events: none;
            }
            .number_controller .count_dowm.disabled::before{
                background-color: #cecece;
            }
            .number_controller .count_up.disabled::before, .number_controller .count_up.disabled::after{
                background-color: #cecece;
            }
		</style>
	</head>
	<body>
        <!-- 这个有长按增加数量 -->
		<div class="number_controller">
            <a class="count_dowm" href="javascript:void(0)"></a>
            <!-- pc端 -->
            <input class="count_input" type="text" value="1" data-min="1" data-max="10" />
            <!-- 移动端 -->
            <!-- <input type="number" class="count_input" value="1" data-min="1" data-max="10" /> -->
			<a class="count_up" href="javascript:void(0)"></a>
        </div>
        <div class="number_controller">
            <a class="count_dowm" href="javascript:void(0)"></a>
            <!-- pc端 -->
            <input class="count_input" type="text" value="1" data-min="1" data-max="0" />
            <!-- 移动端 -->
            <!-- <input type="number" class="count_input" value="1" data-min="1" data-max="10" /> -->
            <a class="count_up" href="javascript:void(0)"></a>
        </div>
        <div class="number_controller">
            <a class="count_dowm" href="javascript:void(0)"></a>
            <!-- pc端 -->
            <input class="count_input" type="text" value="1" data-min="5" data-max="3" />
            <!-- 移动端 -->
            <!-- <input type="number" class="count_input" value="1" data-min="1" data-max="10" /> -->
            <a class="count_up" href="javascript:void(0)"></a>
        </div>
		<script>
			$(function(){
                // 有加减的输入框
                $('.number_controller').each(function (i, e) {
                    //最大的数量
                    var MAX_COUNT = 99999;
                    //最小数量
                    var MIN_COUNT = 0;
                    //每次加减数量
                    var EVERY_COUNT = 1;

                    var $controller = $(e),
                        $input = $controller.find('.count_input'),
                        $up = $controller.find('.count_up'),
                        $dowm = $controller.find('.count_dowm'),
                        max = $input.data('max'),
                        min = $input.data('min')

                    testNumberDisabled($input)

                    $input.on('keyup', function () {
                        var count = $(this)
                        count.val(count.val().replace(/\D/g, ""))
                        if (count.val() != "") {
                            count.val(parseInt(count.val()))
                        }

                        testNumberDisabled(this)
                    })

                    $up.on('click', function () {
                        var count = $(this).siblings('.count_input')
                        count.val(parseInt(count.val()) + EVERY_COUNT)
                        // count.val() < max ? count.val(parseInt(count.val()) + EVERY_COUNT) : max
                        testNumberDisabled(this)
                    })

                    $dowm.on('click', function () {
                        var count = $(this).siblings('.count_input')
                        count.val(parseInt(count.val()) - EVERY_COUNT)
                        // count.val() > min ? count.val(parseInt(count.val()) - EVERY_COUNT) : min
                        testNumberDisabled(this)
                    })
                    
                    function testNumberDisabled(event) {
                        var input = $(event).parent().find('.count_input'),
                            up = input.siblings('.count_up'),
                            dowm = input.siblings('.count_dowm'),
                            max = input.data('max'),
                            min = input.data('min'),
                            value = input.val()

                        if (value <= min) {
                            value = min
                            input.val(min)
                            dowm.addClass('disabled')
                        } else {
                            dowm.removeClass('disabled')
                        }
                        if (value >= max) {
                            value = max
                            if(max > min) input.val(max)
                            up.addClass('disabled')
                        } else {
                            up.removeClass('disabled')
                        }
                    }
                })
				
			});
		</script>
	</body>
</html>
